<template>
  <div class="teacherInfo">
    <div class="teacherInfo-header">
      <box-border title-button="老师信息" />
      <el-row :gutter="100" type="flex" justify="space-around">
        <el-col :span="12">
          <div class="teacherInfo-header-left">
            <div class="teacherInfo-header-left-content">
              <div class="teacherInfo-header-left-content-img">
                <el-avatar
                  :size="100"
                  :src="teacherInfo.picture"
                />
              </div>
              <div class="teacherInfo-header-left-content-text">
                <ul>
                  <li>名字：<span>{{ teacherInfo.nickName }}</span></li>
                  <li>年龄：<span>{{ teacherInfo.age }}</span></li>
                  <li>教学经验：<span>{{ teacherInfo.experience }}</span></li>
                  <li>手机号：<span>{{ teacherInfo.mobile }}</span></li>
                  <li>邮箱：<span>{{ teacherInfo.email }}</span></li>
                </ul>
                <ul>
                  <li>性别：<span>{{ teacherInfo.sex }}</span></li>
                  <li>地区：<span>{{ teacherInfo.area }}</span></li>
                  <li>擅长科目：<span>{{ teacherInfo.advantage }}</span></li>
                  <li>上课方式：<span>{{ teacherInfo.tools }}</span></li>
                  <li>适合级别：<span>{{ teacherInfo.range }}</span></li>
                </ul>
              </div>
              <div class="teacherInfo-header-left-content-myself-Comment">
                自我评价：<span>
                  {{ teacherInfo.introduce }}</span>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="teacherInfo-header-right"><bar-echart /></div>
        </el-col>
      </el-row>
    </div>
    <div class="teacherInfo-center">
      <box-border title-button="开设课程" />
      <div class="teacherInfo-center-content">
        <class-model v-for="teacherClass in teacherClassList" :key="teacherClass.id" width-height="width:210px;height:200px" style="class-model:last-child{margin-right:auto;}">
          <div slot="class-img">
            <img :src="teacherClass.class_img" alt="">
          </div>
          <div slot="class-name">{{ teacherClass.class_name }}</div>
        </class-model>
      </div>
    </div>
    <div class="teacherInfo-footer">
      <box-border title-button="授课反馈" />
      <el-row :gutter="140" type="flex" justify="space-between" align="middle">
        <el-col :span="12">
          <div class="teacherInfo-footer-left">
            <category-echart />
          </div>
        </el-col>
        <el-col :span="12">
          <div class="teacherInfo-footer-right">
            <GaugeEcharts />
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import BarEchart from './BarEcharts'
import CategoryEchart from './CategoryEchart'
import GaugeEcharts from './GaugeEcharts'
export default {
  components: {
    BarEchart,
    CategoryEchart,
    GaugeEcharts
  },
  data() {
    return {
      teacherId: '',
      teacherInfo: {},
      teacherClassList: []
    }
  },
  created() {
    this.teacherId = this.$route.params.id
  },
  mounted() {
    this.getTeacherInfo()
    this.getTeacherClassList()
  },
  methods: {
    async getTeacherInfo() {
      const result = await this.$API.teacher.getTeacherInfo(this.teacherId)
      this.teacherInfo = result.data.rows[0]
    },
    async getTeacherClassList() {
      const { data } = await this.$API.teacher.getTeacherClassList(this.teacherId)
      this.teacherClassList = data.rows
    }
  }
}
</script>

<style lang="scss" scoped>
.teacherInfo {
  min-width: 1200px;
  margin: 80px 100px;
  .teacherInfo-header {
    .teacherInfo-header-left{
      .teacherInfo-header-left-content {
       margin: 40px 20px 0 20px;
       .teacherInfo-header-left-content-img {
         margin-right: 1%;
         float: left;
         left: 0;
         top: -3%;
       }
       .teacherInfo-header-left-content-text {
         font-size: 15px;
         font-family: "Hiragino Sans GB";
         display: flex;
         justify-content: space-around;
         align-items: center;
         ul {
           margin-top: 25px;
           height: 100%;
         }
         li {
           display: flex;
           justify-content: flex-start;
           align-items: center;
           padding: 15px 0 20px 0;
         }
       }
       .teacherInfo-header-left-content-myself-Comment{
         margin: 20px 14px;
       }
      }
    }
    .teacherInfo-header-right{
      width: 90%;
      height: 100%;
      text-align: right;
      margin: 30px 0 0px 40px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
  .teacherInfo-center {
    margin: 80px 0;
    .teacherInfo-center-content{
      display: flex;
      justify-content: space-between;
      align-items: center;
      &:last-child{
        margin-right:auto;
      }
    }
  }
  .teacherInfo-footer {
    margin: 80px 0;
    width: 100%;
    height: 400px;
    .teacherInfo-footer-left{
      margin: 40px 0;
      width: 100%;
      height: 100%;
    }
  }
}
</style>
